import { Theme } from '@radix-ui/themes'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'
import { poppins } from '@/lib/fonts'
import './globals.css'
import './rc-color-picker.css'
import './rc-slider.css'
import '@radix-ui/themes/styles.css'

export default function App(props) {
  const { Component, pageProps } = props

  // Inject Auth License services
  const { pathname } = useRouter()

  useEffect(() => {
    window.dataLayer = window.dataLayer || []
    function gtag() {
      dataLayer.push(arguments)
    }

    gtag('js', new Date())
    gtag('config', 'G-RCVZZ25ZP4')
  }, [])

  /**
   * Documentation pages should render with the Nextra layout.
   * Other pages should render with the default layout.
   *
   * The `matcher` should be consistent with the src/middleware.ts.
   */
  const isDocs = ['/typedoc', '/guides', '/pro/guides', '/blog/post'].some(m => pathname.startsWith(m))
  const isPlayground = ['/playground', '/examples/', '/pro/examples/'].some(m => pathname.startsWith(m))

  // remove dark mode class from nextra to avoid conflicts
  useEffect(() => {
    if (!isDocs) {
      document.documentElement.classList.remove('dark')
      document.documentElement.style.colorScheme = null
    } else {
      if (pathname.includes('/sheet/')) {
        document.documentElement.style.setProperty('--nextra-primary-hue', '128deg')
        document.documentElement.style.setProperty('--nextra-primary-saturation', '43%')
      } else if (pathname.includes('/doc/')) {
        document.documentElement.style.setProperty('--nextra-primary-hue', '214deg')
        document.documentElement.style.setProperty('--nextra-primary-saturation', '80%')
      } else if (pathname.includes('/slide/')) {
        document.documentElement.style.setProperty('--nextra-primary-hue', '0deg')
        document.documentElement.style.setProperty('--nextra-primary-saturation', '78%')
      } else {
        document.documentElement.style.setProperty('--nextra-primary-hue', '180deg')
        document.documentElement.style.setProperty('--nextra-primary-saturation', '50%')
      }
    }
  }, [pathname])

  const isProd = process.env.NODE_ENV === 'production'

  return (
    <>
      <Theme>
        {isDocs
          ? (
            <Component {...pageProps} />
            )
          : (
            <div className={poppins.className}>
              <Navbar />
              <Component {...pageProps} />
              {!isPlayground && <Footer />}
            </div>
            )}
      </Theme>

      {/* Global site tag (gtag.js) - Google Analytics */}
      {isProd && <script async src="https://www.googletagmanager.com/gtag/js?id=G-RCVZZ25ZP4"></script>}
    </>
  )
}
